<template>
	<view class="index-movie-list">
		<!-- <view class="" v-for="(item, index) in showlist" :key="index" style="margin-top: 20rpx;">
			<view class="time_top" style="padding: 0 20rpx;">
				{{item.subList[0].rt}}
			</view>
			<movice-item :list="item.subList" :click-index="index" :isComing="true" @change="upDataList"></movice-item>
		</view> -->
		<view class="notData_layout" v-if="showlist.length ==0">
			<view class="item" v-for="i in 10" style="padding: 20rpx 40rpx;margin-top: 20rpx;">
				<view class="item-left">
					<view class="left-1"></view>
					<view class="left-2">
						<view class="left2-1"></view>
						<view class="left2-2"></view>
						<view class="left2-3"></view>
						<view class="left2-4"></view>
					</view>
				</view>
				<view class="item-right"></view>
			</view>
		</view>
		<view class="isData_layout" v-else>
			<view class="" v-for="(item, index) in showlist" :key="index" style="margin-top: 20rpx;">
				<view class="time_top" style="padding: 0 20rpx;">
					{{item.subList[0].rt}}
				</view>
				<movice-item :list="item.subList" :click-index="index" :isComing="true" @change="upDataList"></movice-item>
			</view>
		</view>
	</view>
</template>

<script>
	import moviceItem from '@/pages/components/index/movice-item.vue'
	export default {
		data() {
			return {}
		},
		props: {
			showlist: {
				type: Array,
				default: []
			}
		},
		components: {
			moviceItem
		},
		methods: {
			upDataList(like, index) {
				this.$emit('change', like, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time_top {
		font-size: 28rpx;
		font-weight: 700;
	}
	.notData_layout {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-left {
				display: flex;
				.left-1 {
					width: 140rpx;
					height: 186rpx;
					background: #F6F6F6;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
				.left-2 {
					width: 296rpx;
					height: 186rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					.left2-1 {
						width: 270rpx;
						height: 40rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
					.left2-2 {
						width: 168rpx;
						height: 28rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
					.left2-3,.left2-4 {
						width: 296rpx;
						height: 28rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
				}
			}
			.item-right {
				width: 104rpx;
				height: 40rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
			}
		}
	}
</style>
